<script setup>
// watchEffect:类似于computed,但它没有产生一个新的值，它依赖的值变化了，它的方法就会再次执行
// 用法

import { ref, watchEffect } from 'vue'

/*
  1：导入
  2：const stop=watchEffect(()=>{
    任意代码，代码中要是用到的值修改了，该方法就会再次执行，定义完它默认就会执行一次
  },{flush:pre:渲染前 ,post:渲染后  ,sync:修改一次执行一次    })
*/

const num = ref(1)
const xxx = ref(false)
const stop = watchEffect(() => {
  console.log(num.value, xxx.value)
})
</script>

<template>
  <div class="about-page">
    about

    <h3>{{ num }}</h3>
    <button @click="num++">修改num</button>
    <button @click="xxx = !xxx">修改xxx</button>
    <button @click="stop">停止方法</button>
  </div>
</template>

<style lang="scss" scoped></style>
